<template>
  <div class="upImgItem">
    <div v-if="!headImg" class="upImg iconfont icon-shangchuan"></div>
    <img v-if="headImg" :src="headImg" />
    <!-- <input type="file" @change="upImgFn" /> -->
    <input accept="image/*" ref="file" type="file" @change="upImgFn($event)" />
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from "element-plus";
import $ from "jquery";
export default {
  components: {},
  data() {
    return {
      headImg: this.propImg,
    };
  },
  props: {
    propImg: {
      type: String,
      default: "",
    },
  },
  methods: {
    upImgFn(e) {
      let file = e.target.files[0];
      let formData = new FormData(); // 可以增加表单数据
      formData.append("file", file);
      const loading = this.$loading({
        lock: true,
        text: "上传中,请耐心等待~",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.7)",
      });
      $.ajax({
        url: this.$apis + "/common/Upload/UpImg",
        dataType: "json",
        type: "post",
        processData: false,
        contentType: false,
        data: formData,
        success: (res) => {
          if (res.code == 1) {
            this.headImg = res.data.src;
            let data = res.data.src;
            this.$emit("ok", data);
          } else {
            ElMessage(res.msg);
          }
          loading.close();
        },
        error: (res) => {
          loading.close();
          ElMessage("上传超时");
        },
      });
    },
  },
  mounted() {},
  created() {
    if (this.width) {
      this.nodeWidth = this.width;
    }
    if (this.bgc) {
      this.nodeBgc = this.bgc;
      this.nodeColor = "#fff";
    }
  },
};
</script>

<style scoped lang="less">
.upImgItem {
  width: 148px;
  height: 148px;
  font-size: 0px;
  border-radius: 5px;
  background-color: #fafafa;
  position: relative;
  margin-bottom: 30px;
  border: 1px dashed #cdd0d6;
  box-sizing: border-box;
  transition: border 0.3s linear;
  .upImg {
    width: 100%;
    height: 100%;
    line-height: 148px;
    text-align: center;
    font-size: 40px;
    color: #ccc;
    transition: color 0.3s linear;
  }
  input {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    z-index: 2;
  }
  img {
    width: 100%;
  }
}
.upImgItem:hover {
  border: 1px dashed #4b58dc;
}
.upImgItem:hover .upImg {
  color: #4b58dc;
}
</style>
